<template>
  <div>
    <div class="handover-table-wrap">
      <div class="table-box">
        <el-table
          :data="tableData"
          border
          @row-click="singleElection"
          :span-method="objectSpanMethod"
        >
          <el-table-column align="center" width="30">
            <template #default="scope">
              <el-radio
                class="radio"
                v-model="templateSelection"
                :label="scope.row.order_id"
                @click.stop="handleRadioClick(scope.row)"
              >
                &nbsp;
              </el-radio>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="order_id" label="账单编号"> </el-table-column>
          <el-table-column align="center" prop="desk_name" label="桌号"> </el-table-column>
          <el-table-column align="center" prop="clerk_name" label="操作人"> </el-table-column>
          <el-table-column align="center" prop="remake" label="反结原因"> </el-table-column>
          <el-table-column align="center" prop="create_time" label="反结时间"> </el-table-column>
          <el-table-column align="center" prop="price" label="反结前金额（元）"> </el-table-column>
          <el-table-column align="center" prop="real" label="反结后金额（元）"> </el-table-column>
          <template #empty>
            <NotData />
          </template>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import NotData from '@/components/NotData/Index.vue'

interface Props {
  tableData: any[]
}

const props = withDefaults(defineProps<Props>(), {
  tableData: () => []
})

const emit = defineEmits(['singleElection'])

// 选中的单选行数
const templateSelection = ref('')

// 计算合并信息
const spanArr = computed(() => {
  const spanArr: number[] = []
  let pos = 0
  let currentOrderId = ''

  for (let i = 0; i < props.tableData.length; i++) {
    if (i === 0) {
      spanArr.push(1)
      pos = 0
      currentOrderId = props.tableData[i].order_id
    } else {
      if (props.tableData[i].order_id === currentOrderId) {
        spanArr[pos] += 1
        spanArr.push(0)
      } else {
        spanArr.push(1)
        pos = i
        currentOrderId = props.tableData[i].order_id
      }
    }
  }
  return spanArr
})

// 行合并方法
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }: any) => {
  // 对radio列（第0列）和账单编号列（第1列）进行合并
  if (columnIndex === 0 || columnIndex === 1) {
    const _row = spanArr.value[rowIndex]
    const _col = _row > 0 ? 1 : 0
    return {
      rowspan: _row,
      colspan: _col
    }
  }
}

// 处理radio点击事件
const handleRadioClick = (row: any) => {
  templateSelection.value = row.order_id
  emit('singleElection', row)
}

// 表格单选
const singleElection = (row: any) => {
  console.log('row=====', row)
  templateSelection.value = row.order_id
  emit('singleElection', row)
}
</script>

<style lang="scss" scoped>
:deep(.el-table) {
  border-radius: 12px;
}
:deep(.el-table__body-wrapper) {
  height: 630px;
  overflow-y: auto;
}
//滚动条整体的大小
:deep(.el-table__body-wrapper::-webkit-scrollbar) {
  width: 6px !important;
  height: 0 !important;
}
//滚动条里滑动的滑块
:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb) {
  height: 200px !important;
  background: #d2d2d2 !important;
  border-radius: 3px !important;
}
//滚动条底层样式
:deep(.el-table__body-wrapper::-webkit-scrollbar-track) {
  display: none !important;
}
:deep(.el-table th.el-table__cell) {
  background: #a85b62;
  color: #fff !important;
}
:deep(.el-input__inner) {
  border-radius: 12px;
}
:deep(.el-radio__input.is-checked .el-radio__inner) {
  border-color: #7c0a03;
  background: #7c0a03;
}

.handover-table-wrap {
  background: #fff;
  border-radius: 0px 0px 0px 20px;
}
.table-box {
  border-radius: 12px;
}
.total-desc {
  margin-top: 30px;
  font-size: 14px;
  font-family:
    PingFang SC,
    PingFang SC-Regular;
  font-weight: 400;
  text-align: left;
  color: #333333;
}
</style>
